<template>
    <div>
      <el-card class="condition">
        <main>
        首页/系统管理/用户管理
        </main>
        <main style="font-size: 30px;">
        用户管理
        </main>
        <main>
        查看，编辑，删除用户
        </main>
      </el-card>
       <el-card>
         <el-form label-width="auto" :inline="true">
          <el-form-item label="用户">
            <el-input v-model="pageParam.condition.number" placeholder="输入用户"></el-input>
          </el-form-item>
         <el-form-item label="角色">
           <el-select v-model="pageParam.condition.role" style="width:150px" placeholder="选择角色">
           <el-option label="门禁" value="门禁" />
           <el-option label="道闸" value="道闸" />
           <el-option label="其他" value="其他" />
           </el-select>
         </el-form-item> 
          <el-form-item label="姓名">
            <el-input v-model="pageParam.condition.name" placeholder="输入姓名"></el-input>
          </el-form-item>  
          <el-form-item>
            <el-button @click="handleSearch">查询</el-button>
            <el-button type="success" @click="handnew">新建</el-button>
            <el-button type="danger" @click="handleBatchDelete">批量删除</el-button>
          </el-form-item>
         </el-form>
        <el-table :data="pageData.records" border stripe @selection-change="handleSelectionChange">
          <el-table-column type="selection"></el-table-column>
          <el-table-column prop="number" label="用户"></el-table-column>
          <el-table-column prop="name" label="姓名"></el-table-column>
          <el-table-column prop="gender" label="性别"></el-table-column>
          <el-table-column prop="mailbox" label="邮箱"></el-table-column>
          <el-table-column prop="department" label="部门"></el-table-column>
          <el-table-column prop="role" label="角色"></el-table-column>
          <el-table-column label="操作" width="150">
            <template #default="scope">
              <el-button type="text" size="small" @click="handleEdit(scope.row.id)">编辑</el-button>
              <el-button type="text" size="small" @click="handleDelete(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination-block">
          <el-pagination v-model:current-page="pageData.current" v-model:page-size="pageData.size"
            :page-sizes="[2, 5, 10]" :size="pageData.size" :background="background"
            layout="total, sizes, prev, pager, next, jumper" :total="pageData.total" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />
        </div>
      </el-card>
    </div>
  </template>
  
  <script setup>
  // 从后端将分页数据获取到前端使用表格展示
  import http from '@/utils/http'
  import { ref, onMounted, onBeforeMount } from 'vue'
  import {useRouter} from 'vue-router'
  import { ElMessage, ElMessageBox } from 'element-plus'
  let router = useRouter()
  // 分页参数
  let pageParam = ref({
    pageNum: 1,
    pageSize: 10,
    condition: {
    }
  })
  let pageData = ref({})
  //定义获取分页数据的函数
  async function getPageData() {
    let resp = await http.post('/user/page', pageParam.value)
    pageData.value = resp.data
    console.log(pageData.value)
  }
  //组件加载时执行一次 获取分页数据
  onBeforeMount(() => {
    getPageData()
  })
  function handleSizeChange(val) {
    pageParam.value.pageSize = val
    getPageData()
  }
  function handleCurrentChange(val) {
    pageParam.value.pageNum = val
    getPageData()
  }
  function handleSearch(){
    getPageData()
  }
  function handnew(){
    router.push ('/userForm')
  }
  function handleDelete(id) {
    ElMessageBox.confirm('是否删除该账户', '删除账户', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(async() => {
      let resp = await http.delete(`/user/delete/${id}`)
      if (resp.code == 200) {
        ElMessage({
          type: 'success',
          message: '删除成功!'
        })
        getPageData()
      } 
    })
  }
  
  let multipleSelection = ref([])
  function handleSelectionChange(val) {
    multipleSelection.value = val
  }
  function handleBatchDelete() {
    let ids = []
    multipleSelection.value.forEach(item => {
      ids.push(item.id)
    })
    ElMessageBox.confirm(`确定删除选中的账户(${ids})吗？`, '批量删除', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(async function () {
      let resp = await http.post('/user/delete', ids)
      if(resp.code == 200){
        ElMessageBox.alert(`成功删除选中的账户(${ids})`, '批量删除', {
          confirmButtonText: 'OK'
        })
        getPageData()
      }
    })
  }
  function handleEdit(id){
    router.push('/userForm/?id='+id)
  }
  </script>
  
  <style lang="css" scoped>
  .condition {
    margin-bottom: 20px;
  }
  </style>